<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
    <title>message提示框</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
    	.f-message {
		    font-family: "Monospaced Number","Chinese Quote",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
		    line-height: 1.5;
		    list-style: none;
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		    font-size: 14px;
		    color: rgba(0, 0, 0, 0.65);
		    margin: 0;
		    padding: 0;
		    position: fixed;
		    z-index: 2010;
		    width: 100%;
		    top: 16px;
		    left: 0;
		    pointer-events: none; }

		.f-message .f-message-notice {
		    margin-top: -100px;
		    padding: 8px;
		    text-align: center;
		    -webkit-transition: all 0.3s;
		    -o-transition: all 0.3s;
		    transition: all 0.3s; }

		.f-message .f-message-notice .f-message-notice-content {
		    padding: 10px 16px;
		    border-radius: 4px;
		    background: #fff;
		    display: inline-block;
		    pointer-events: all;
		    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		    cursor: pointer;
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none; }

		.f-message .f-message-notice .f-message-notice-content .fa {
		    margin-right: 5px; }

		.f-message .f-message-notice .f-message-notice-content .fa-check-circle {
		    color: #52C41A; }

		.f-message .f-message-notice .f-message-notice-content .fa-exclamation-circle {
		    color: #FAAD14; }

		.f-message .f-message-notice .f-message-notice-content .fa-times-circle {
		    color: #F5222D; }

		.f-message .f-message-notice .f-message-notice-content .fa-info-circle {
		    color: #1890FF; }
    </style>
</head>
<body>
<button type="button" onclick="f_message.show('success','成功')">success</button>
<button type="button" onclick="f_message.show('warning','警告')">warning</button>
<button type="button" onclick="f_message.show('error','失败')">error</button>
<button type="button" onclick="f_message.show('info','通知',5000)">info</button>
<button type="button" onclick="f_message.close()">close</button>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    function f_messageFn() {
        var _this = this;
        var body = $('body')[0];
        var interval;
        var showNum = 0;
        var icons = {
            success: '<i class="fa fa-check-circle" aria-hidden="true"></i>',
            warning: '<i class="fa fa-exclamation-circle" aria-hidden="true"></i>',
            error: '<i class="fa fa-times-circle" aria-hidden="true"></i>',
            info: '<i class="fa fa-info-circle" aria-hidden="true"></i>'
        };
        var html_template = "<div class='f-message' ><div class='f-message-notice'><div class='f-message-notice-content'></div></div></div>";
        //插入模板
        $(body).append(html_template);

        var notice = $('.f-message-notice');
        var notice_content = $('.f-message-notice-content');

        /**
         * 显示提示框
         * @param type required
         * @param text required
         * @param time required
         */
        _this.show = function show(type, text, time) {
            try {
                type = type || 'info';
                time = (time && time > 0) ? time : 1500;
                if (showNum === 0) {
                    notice_content.html(icons[type] + "<span>" + text + "</span>");
                    notice.css('opacity', '1');
                    notice.css('margin-top', '-8px');
                    showNum++
                } else {
                    _this.close('hide');
                    setTimeout(function () {
                        notice_content.html(icons[type] + "<span>" + text + "</span>");
                        notice.css('opacity', '1');
                        notice.css('margin-top', '-8px');
                    }, 200)
                }
                //自动关闭
                interval = setTimeout(function () {
                    _this.close();
                }, time);
            }
            catch (e) {
                console.log(e);
            }
        };
        /**
         * 关闭提示框
         * @param flag
         */
        _this.close = function (flag) {
            flag = flag ? flag : 'null';
            notice.css('opacity', '0');
            notice.css('margin-top', '-100px');
            //如果调用了关闭方法，就取消自动关闭的方法
            clearTimeout(interval);
            if (flag != 'hide') {
                showNum = 0;
            }
        }
    };
    window.f_message = new f_messageFn();
});
</script>
</body>
</html>